<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rect</title>
    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.min.css">
</head>

<body>

    <div class="container">
        <svg width="640" height="500" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="300" height="400" stroke="pink" fill="cyan" stroke-width="5" />

            <text x="20" y="50">Hello World!</text>

            <text x="20" y="75" textLength="200">Hello World!</text>

            <text x="20" y="100">
                <tspan font-weight="bold" fill="blue"  text-decoration="underline" rotate="10">This is bold and red</tspan>
            </text>

            <path id="my_path" d="M0 200 C 50 100, 150 100, 200 200 S 350 300, 400 200" stroke="black" fill="transparent" />
            <text>
                <textPath xlink:href="#my_path">&nbsp;&nbsp;&nbsp;&nbsp; This text follows a curve.</textPath>
            </text>
        </svg>
    </div>

    <div class="container">
        <img src="/fixtures/text.svg">
    </div>

    <div class="container">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

                <!-- to hide the path, it is usually wrap into a <defs> element -->
                <!-- <defs> -->
                <path id="MyPath" fill="none" stroke="red"
                        d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
                <!-- </defs> -->

                <text>
                  <textPath href="#MyPath">
                    The quick brown fox jumps over the lazy dog.
                  </textPath>
                </text>

              </svg>
    </div>

</body>

</html>